import axios from 'axios';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Seo from '@/core/components/Seo';
import dynamic from 'next/dynamic';
import { capitalizeEachWord } from '../../utils/capializeFIrstWord';

const BasicLayout = dynamic(() =>
  import('@/core/components/layouts/BasicLayout')
);
const ProductSearch = dynamic(() =>
  import('@/lib/product/components/ProductSearch')
);

// const BASE_URL = process.env.NEXT_PUBLIC_SELF_HOST;
const BASE_URL = 'https://indoteknik.com';

export default function KeywordPage() {
  const router = useRouter();
  const [result, setResult] = useState(null);
  const [query, setQuery] = useState(null);

  // Ambil slug dari URL dinamis
  const keywordSlug = router?.query?.slug || '';
  const keyword = keywordSlug.replace(/-/g, ' ').toLowerCase();
  const url = BASE_URL + router.asPath.split('?')[0];
  const slugTitle = capitalizeEachWord(keyword);

  // Fetch info dari Solr index "url_category_brand"
  const getUrls = async (url) => {
    try {
      const response = await axios(
        `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/url-category_brand?url=${url}`
      );
      const data = response?.data?.response?.docs[0] || null;
      setResult(data);
      console.log('[🔍 result from API]', data); // Tambahin ini
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  // Panggil fetch setelah router siap
  useEffect(() => {
    if (router.isReady) {
      getUrls(url);
    }
  }, [router.isReady]);

  useEffect(() => {
    if (result) {
      let fqParts = [];

      if (result.category_id_i) {
        fqParts.push(`category_parent_ids:${result.category_id_i}`);
      }

      if (result.brand_id_i) {
        fqParts.push(`manufacture_id_i:${result.brand_id_i}`);
      }

      const fq = fqParts.join(' AND ');
      const q = keyword || '*:*';

      console.log('SOLR QUERY:', { q, fq });

      setQuery({
        fq,
        q,
        from: 'searchkey',
      });
    }
  }, [result, keyword]);

  // if (!result) {
  //   return (
  //     <BasicLayout>
  //       <Seo title='Keyword tidak ditemukan' />
  //       <div className='container py-5'>
  //         <h2>Produk tidak ditemukan berdasarkan keyword</h2>
  //       </div>
  //     </BasicLayout>
  //   );
  // }

  return (
    <BasicLayout>
      <Seo
        title={`Beli ${slugTitle} Original & Harga Terjangkau - indoteknik.com`}
        description={`Beli ${slugTitle} Kirim Jakarta Surabaya Semarang Makassar Manado Denpasar Balikpapan Medan Palembang Lampung Bali Bandung Makassar Manado.`}
        additionalMetaTags={[
          {
            property: 'keywords',
            content: `Beli ${slugTitle}, harga ${slugTitle}, ${slugTitle} murah, toko ${slugTitle}, ${slugTitle} jakarta, ${slugTitle} surabaya`,
          },
        ]}
        canonical={`${process.env.NEXT_PUBLIC_SELF_HOST}${
          router.asPath.split('?')[0]
        }`}
      />
      {query && (
        <ProductSearch
          query={{ ...query, from: 'searchkey' }}
          prefixUrl={router.asPath}
        />
      )}
    </BasicLayout>
  );
}